<template>
  <div class="container">
    <div class="topBox">
      <div class="title">
        <p class="subtitle">自定义合同模板</p>
        <p class="explain">
          合同模板发布后，线上电子合同及导出合同将使用该模板内容
        </p>
      </div>
      <div class="btnBox">
        <el-button
          class="commonBut saveBtn funComBut"
          icon="icon iconfont iconbianji"
          @click="editTemplate"
          v-if="isSaveTemplate && !isPublishTemplate"
          >编辑</el-button
        >
        <el-button
          class="commonBut saveBtn funComBut"
          icon="icon iconfont icondaochu"
          @click="exportTemplate"
          v-if="isSaveTemplate"
          >导出</el-button
        >
        <el-button
          class="commonBut saveBtn funComBut"
          icon="icon el-icon-s-promotion"
          @click="publishTemplate"
          v-if="isSaveTemplate && !isPublishTemplate"
          >发布</el-button
        >
        <el-button
          class="commonBut saveBtn funComBut recallBtn"
          icon="icon iconfont iconchehui"
          @click="recallTemplate"
          v-if="isSaveTemplate && isPublishTemplate"
          >撤回</el-button
        >
      </div>
    </div>
    <div :class="isSaveTemplate ? 'mainCon showTemplate' : 'mainCon'">
      <div class="noData" v-if="!isSaveTemplate">
        <img src="../../../static/img/noData.png" alt="" class="nodataImg" />
        <p class="nodataTip">暂无自定义合同模板，人员档案将使用默认模板</p>
        <el-button class="saveBtn nodataBtn" @click="editTemplate"
          >新建模板</el-button
        >
      </div>
      <div v-else v-html="html" class="viewTemplate"></div>
    </div>
    <el-dialog
      title="温馨提示"
      :visible.sync="confirmDialogVisible"
      width="40%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <span><i class="icon iconfont iconshengming"></i> {{ confirmInfo }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button class="btn cancel" @click="confirmDialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" class="btn save" @click="handleConfirm()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import htmlDocx from 'html-docx-js/dist/html-docx'
import saveAs from 'file-saver'
export default {
  name: 'viewContractTemplate',
  data() {
    return {
      isSaveTemplate: false,
      isPublishTemplate: false,
      confirmDialogVisible: false,
      confirmInfo: '',
      status: 0,
      html: '',
    }
  },
  mounted() {
    this.getTemplateHtml()
  },
  methods: {
    // 获取自定义模板
    getTemplateHtml() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/contracttemp/getTemp',
      })
        .then((response) => {
          if (!response.data.hasError) {
            if (response.data.result && response.data.result.data) {
              this.html = response.data.result.data
              this.html && this.html.length > 0
                ? (this.isSaveTemplate = true)
                : (this.isSaveTemplate = false)
              response.data.result.status
                ? (this.isPublishTemplate = true)
                : (this.isPublishTemplate = false)
            }
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    editTemplate() {
      this.$router.push({
        name: 'editContractTemplate',
        path: '/home/baseSettings/editContractTemplate',
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/baseSettings/viewContractTemplate',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 导出模板
    exportTemplate() {
      let page =
        '<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>' +
        this.html +
        '</body></html>'
      let converted = htmlDocx.asBlob(page)
      saveAs(converted, '农民工简易劳务合同.docx')
    },
    publishTemplate() {
      this.confirmDialogVisible = true
      this.confirmInfo = '模板发布后，线上电子合同将使用该模板，是否确认？'
      this.status = 1
    },
    recallTemplate() {
      this.confirmDialogVisible = true
      this.confirmInfo = '模板撤回后，线上电子合同将使用默认模板，是否确认？'
      this.status = 0
    },
    handleConfirm() {
      this.confirmSubmit(this.status)
    },
    // 发布或者撤销
    confirmSubmit(status) {
      this.axios({
        method: 'post',
        url: 'api-e/cs/contracttemp/publish',
        data: {
          status,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message.success('操作成功')
            this.isPublishTemplate = this.status === 1 ? true : false
            this.confirmDialogVisible = false
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  padding: 24px;
  .topBox {
    height: 92px;
    background: #e4ebf1;
    position: relative;
    .title {
      padding: 24px;
      .subtitle {
        font: bold 18px Microsoft YaHei;
        color: #333;
      }
      .explain {
        font-size: 14px;
        color: #717171;
        font-weight: 400;
        margin-top: 10px;
      }
    }
    .btnBox {
      position: absolute;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
      /deep/ .el-icon-s-promotion {
        font-size: 16px;
      }
      /deep/ .el-button span {
        margin-left: 5px;
      }
      .recallBtn {
        background: #3d5266;
        border-color: #3d5266;
      }
    }
  }
  .mainCon {
    top: 221px;
    .noData {
      padding-top: 140px;
      text-align: center;
      .nodataImg {
        width: 206px;
      }
      .nodataTip {
        margin-top: 40px;
        line-height: 22px;
        font-size: 16px;
        color: #3a3a3a;
        text-align: center;
        font-weight: 400;
      }
      .nodataBtn {
        margin-top: 40px;
        width: 136px;
        height: 36px;
        line-height: 12px;
      }
    }
    .viewTemplate {
      background-color: #fff;
      width: 816px;
      min-height: 640px;
      margin: 0 auto;
      padding: 60px 70px;
    }
  }
  .showTemplate {
    background: #d9dcdf;
  }
}
/deep/ .el-dialog__header {
  border-bottom: 0;
}
/deep/ .el-dialog__footer {
  background: none;
}
.iconshengming {
  width: 20px;
  height: 20px;
  color: #ffaa00;
}
</style>
